<template>
  <div class="space-y-4">
    <div>
      <h2 class="text-lg font-semibold">GPT-4 vs Claude 3.5 性能对比</h2>
      <div class="text-sm text-gray-500">时间: 2024-01-20 14:30 | 状态: 进行中 | 进度: 75%</div>
    </div>

    <div class="overflow-auto border rounded-card bg-white">
      <table class="min-w-[800px] w-full text-sm">
        <thead class="bg-gray-50">
          <tr>
            <th class="p-2 text-left border w-64">测试输入</th>
            <th class="p-2 text-left border">GPT-4</th>
            <th class="p-2 text-left border">Claude 3.5</th>
            <th class="p-2 text-left border">Gemini Pro</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, idx) in rows" :key="idx">
            <td class="align-top p-2 border w-64">
              <div>topic: AI</div>
              <div>style: 专业</div>
              <div>length: 200</div>
            </td>
            <td class="p-2 border">
              <div class="border rounded p-2 mb-2">响应结果A ...</div>
              <div class="flex items-center gap-4 text-xs text-gray-500">
                <span>⭐ 4.2/5</span>
                <span>⏱ 1.2s</span>
                <span>💰 $0.02</span>
              </div>
            </td>
            <td class="p-2 border">
              <div class="border rounded p-2 mb-2">响应结果B ...</div>
              <div class="flex items-center gap-4 text-xs text-gray-500">
                <span>⭐ 3.8/5</span>
                <span>⏱ 0.9s</span>
                <span>💰 $0.015</span>
              </div>
            </td>
            <td class="p-2 border">
              <div class="border rounded p-2 mb-2">响应结果C ...</div>
              <div class="flex items-center gap-4 text-xs text-gray-500">
                <span>⭐ 4.5/5</span>
                <span>⏱ 1.5s</span>
                <span>💰 $0.018</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="grid md:grid-cols-3 gap-3">
      <div class="p-3 border rounded-card bg-white">📊 总体评分: GPT-4(4.1) Claude(3.9) Gemini(4.3)</div>
      <div class="p-3 border rounded-card bg-white">⏱ 平均延迟: GPT-4(1.3s) Claude(1.0s) Gemini(1.4s)</div>
      <div class="p-3 border rounded-card bg-white">💰 平均成本: GPT-4($0.021) Claude($0.016) Gemini($0.019)</div>
    </div>

    <div class="flex gap-2">
      <button class="px-3 py-2 bg-primary text-white rounded-btn text-sm">生成报告</button>
      <button class="px-3 py-2 border rounded-btn text-sm">导出CSV</button>
      <button class="px-3 py-2 border rounded-btn text-sm">保存实验</button>
    </div>
  </div>
</template>

<script setup lang="ts">
const rows = new Array(4).fill(null)
</script>

<style scoped>
</style>